<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navs"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card
              v-for="subItem in item.foods"
              :key="subItem.id"
              :price="subItem.price"
              :desc="subItem.goodsDesc"
              :title="subItem.name"
              :thumb="subItem.imgUrl"
            >
              <template #footer>
                <van-stepper
                  v-model="subItem.count"
                  :min="0"
                  default-value="0"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapState} from 'vuex'
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      activeKey: 1,
      heightList: [],
      loading: false,
    }
  },
  mounted() {},
  methods: {
    ...mapActions('shop', ['A_getGoodsList']),
    handleClick(index) {
      this.loading = true
      this.activeKey = index
      const el = document.querySelectorAll('.good-item')
      this.bs2.scrollToElement(el[this.activeKey], 1000)
    },
    renderScroll() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.bs1 = new BScroll('.navs', {
            click: true,
          })

          this.bs2 = new BScroll('.right-container', {
            click: true,
            probeType: 3, //派发滚动事件
          })

          const el = document.querySelectorAll('.good-item')
          el.forEach(item => {
            this.heightList.push(item.clientHeight)
          })
          this.bs2.on('scroll', position => {
            if (this.loading) return
            let Y = Math.abs(position.y)
            // 滚动距离
            this.heightList.reduce((total, cur, index) => {
              if (Y > total && Y < total + cur) {
                this.activeKey = index
              }
              return total + cur
            }, 0)
          })

          // 滚动结束为false
          this.bs2.on('scrollEnd', () => {
            this.loading = false
          })
        })
      }, 1000)
    },
  },
  computed: {
    ...mapGetters('shop', ['navs']),
    ...mapState('shop', ['goodsList']),
  },
  async created() {
    await this.A_getGoodsList()
    this.renderScroll()
  },
}
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
}
</style>
